	{layout name='./base'}
	<style type="text/css">
		.mobile{
			border: solid 1px #999999;
			height: 500px;
			display: flex;
		}
		.mobile dl{
			margin: 0;
			padding: 0;
			display: flex;
			flex: 1;
			flex-direction: column-reverse;
		}
		.mobile dl dt{
			color: #ffffff;
			background: #999999;
			height: 30px;
			text-align: center;
			border: solid 1px #f3f3f3;
			cursor: pointer;
			line-height: 2em;
		}
		.mobile dl dd a{
			border: solid 1px #f3f3f3;
			text-align: center;
			padding: 6px;
			display: block;
			text-decoration: none;
		}
		.top-menu,.sub-menu{
			position: relative;
		}
		.top-menu .top-fa,.sub-menu .sub-fa{
			position: absolute;
			right: -10px;
			top:-10px;
			color: #999999;
			cursor: pointer;
			display: none;
		}
		.top-menu:hover .top-fa, .sub-menu:hover .sub-fa{
			display: block;
		}
	</style>
	<div ng-app="hd" ng-controller="ctrl">
		<form action="/menu/{$data.id}" method="post" class="form-horizontal" role="form">
			<input type="hidden" name="_method" value="PUT" >
			<div class="container">
				<div class="row">
					<div class="col-xs-4" class="app">
						<div class="mobile">
							<dl ng-repeat="v in data.button">
								<dt ng-bind="v.name"></dt>
								<dd>
									<a href="" ng-repeat="d in v.sub_button" ng-bind="d.name"></a>
								</dd>
							</dl>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="">菜单内容</label>
								<textarea rows="5" class="form-control" placeholder="请输入文本内容">{{data}}</textarea>
								<input type="hidden" name="content" value="{{data}}" />
							</div>
					    	<button style="float: right;" type="submit" class="btn btn-primary">保存</button>
					    </div>
					</div>
					<div class="col-xs-8">
						<div class="form-group">
							<lable class="col-sm-2 control-label">菜单名称</lable>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="name" value="{$data.name}" placeholder="请输入菜单名称"/>
							</div>
						</div>
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">编辑</h3>
							</div>
							<div class="panel-body">
								<!--一级菜单开始-->
								<div class="panel panel-default top-menu" ng-repeat="v in data.button">
									<i class="fa fa-times-circle top-fa fa-lg" ng-click="removeTopMenu(v)"></i>
									<div class="panel-body">
										<div class="form-group">
											<lable class="col-sm-2 control-label">标题</lable>
											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="v.name"/>
											</div>
										</div>
										<div class="form-group" ng-hide="v.sub_button.length>0">
											<lable class="col-sm-2 control-label">类型</lable>
											<div class="col-sm-10">
												<label class="radio-inline">
													<input type="radio" ng-model="v.type" value="click" ng-click = "removeTopType(v, v.type)"/>
													关键词
												</label>
												<label class="radio-inline">
													<input type="radio" ng-model="v.type" value="view" ng-click = "removeTopType(v, v.type)"/>
													网址
												</label>
											</div>
										</div>
										<div class="form-group" ng-if="v.type=='click' && (!v.sub_button || v.sub_button.length==0)">
											<lable class="col-sm-2 control-label">关键词</lable>
											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="v.key" />
											</div>
										</div>
										<div class="form-group" ng-if="v.type=='view' && (!v.sub_button || v.sub_button.length==0)">
											<lable class="col-sm-2 control-label">链接</lable>
											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="v.url" placeholder="请输入已http://或https://的网址,如http://ww.baidu.com"/>
											</div>
										</div>
										<!--二级菜单-->
										<div class="panel panel-default sub-menu" ng-repeat="d in v.sub_button">
											<i class="fa fa-times-circle sub-fa fa-lg" ng-click="removeSubMenu(v,d)"></i>
											<div class="panel-body">
												<div class="form-group">
													<lable class="col-sm-2 control-label">标题</lable>
													<div class="col-sm-10">
														<input type="text" class="form-control" ng-model="d.name"/>
													</div>
												</div>
												<div class="form-group">
													<lable class="col-sm-2 control-label">类型</lable>
													<div class="col-sm-10">
														<label class="radio-inline">
															<input type="radio" ng-model="d.type" value="click" ng-click = "removeSubType(d, d.type)"/>
															关键词
														</label>
														<label class="radio-inline">
															<input type="radio" ng-model="d.type" value="view" ng-click = "removeSubType(d, d.type)"/>
															网址
														</label>
													</div>
												</div>
												<div class="form-group" ng-if="d.type=='click'">
													<lable class="col-sm-2 control-label">关键词</lable>
													<div class="col-sm-10">
														<input type="text" class="form-control" ng-model="d.key" />
													</div>
												</div>
												<div class="form-group" ng-if="d.type=='view'">
													<lable class="col-sm-2 control-label">链接</lable>
													<div class="col-sm-10">
														<input type="text" class="form-control" ng-model="d.url" placeholder="请输入已http://或https://的网址,如http://ww.baidu.com"/>
													</div>
												</div>
											</div>
										</div>
										<!--二级菜单结束-->
										<button type="button" class="btn btn-info" ng-click="addSubButton(v)">添加菜单</button>
									</div>
								</div>
								<!--一级菜单结束-->
								<button type="button" class="btn btn-success" ng-click="addTopButton()">添加一级菜单</button>
							</div>
						</div>
					</div>
				</div>				
			</div>			
		</form>
	</div>
	<script>
		var m = angular.module('hd', []);
		m.controller('ctrl',['$scope', function ($scope) {
			$scope.data = {$data['content']}
			//删除一级菜单
			$scope.removeTopMenu = function(item) {
				$scope.data.button = _.without($scope.data.button, item);
			}
			//删除二级菜单
			$scope.removeSubMenu = function(topMenu, subMenu) {
				if( topMenu.sub_button.length === 1 ){
					delete topMenu.sub_button;
					return ;
				}
				topMenu.sub_button = _.without(topMenu.sub_button, subMenu);
			}
			
			//添加一级菜单
			$scope.addTopButton = function() {
				var menu = {
					"type": "",
					"name": "",
					"key": ""
				};
				if ($scope.data.button.length == 3){
					alert('一级菜单最多三个');
				}else{
					$scope.data.button.push(menu);
				}
			}
			
			//添加二级菜单
			$scope.addSubButton = function (item) {
				var menu = {
					'type': "",
					"name": "",
					"key": ""
				};
				if(!item.sub_button) {
					item.sub_button = [];
				}
				if (item.sub_button.length == 5){
					alert('二级菜单最多五个');
				}else{
					item.sub_button.push(menu);
				}
				if(typeof(item.sub_button) !== 'undefined'){
					delete item.type; 
					delete item.key;
					delete item.url;
				}
			}
			//删除一级菜单的key
			$scope.removeTopType = function (item, type) {
				if(type == 'click'){
					delete item.url;
				}else{
					delete item.key;
				}
			}
			//删除二级菜单的key
			$scope.removeSubType = function (item, type) {
				if(type == 'click'){
					delete item.url;
				}else{
					delete item.key;
				}
			}
		}])
	</script>
